<template>
    <div>
        <div class="home-right">
            <div class="right-top">
                <div class="right-top-line">
                    <div class="top-line-item _big">
                        <div class="top-line-title _address">蒙苏经济开发区</div>
                        <div class="top-line-value">2022-03-25 14:00</div>
                    </div>
                    <div class="top-line-item _middle"
                         @click="fGetEchartsData('aqis','aqi')">
                        <div class="top-line-title _middle"
                             :class=" sPrimarypollutant==='aqi'?'_red':'_green'">AQI</div>
                        <div class="top-line-value">{{oData.aqi}}</div>
                    </div>
                    <div class="top-line-item _middle">
                        <div class="top-line-title _middle"
                             :class=" sPrimarypollutant==='aqi'?'_red':'_green'">空气质量指数等级</div>
                        <div class="top-line-value">{{oData.aqilevel}}</div>
                    </div>
                </div>
                <div class="right-top-line">
                    <div class="top-line-item _small"
                         @click="fGetEchartsData('pm25s','pm25')">
                        <div class="top-line-title"
                             :class=" sPrimarypollutant==='pm25'?'_red':'_green'">PM2.5</div>
                        <div class="top-line-value">{{oData.pm25}}</div>
                    </div>
                    <div class="top-line-item _small"
                         @click="fGetEchartsData('pm10s','pm10')">
                        <div class="top-line-title"
                             :class=" sPrimarypollutant==='pm10'?'_red':'_green'">PM10</div>
                        <div class="top-line-value">{{oData.pm10}}</div>
                    </div>
                    <div class="top-line-item _small"
                         @click="fGetEchartsData('so2s','so2')">
                        <div class="top-line-title"
                             :class=" sPrimarypollutant==='so2'?'_red':'_green'">SO2</div>
                        <div class="top-line-value">{{oData.so2}}</div>
                    </div>
                    <div class="top-line-item _small"
                         @click="fGetEchartsData('no2s','no2')">
                        <div class="top-line-title"
                             :class=" sPrimarypollutant==='no2'?'_red':'_green'">NO2</div>
                        <div class="top-line-value">{{oData.no2}}</div>
                    </div>
                    <div class="top-line-item _small"
                         @click="fGetEchartsData('o3s','o3')">
                        <div class="top-line-title"
                             :class=" sPrimarypollutant==='o3'?'_red':'_green'">O3</div>
                        <div class="top-line-value">{{oData.o3}}</div>
                    </div>
                    <div class="top-line-item _small"
                         @click="fGetEchartsData('cos','co')">
                        <div class="top-line-title"
                             :class=" sPrimarypollutant==='co'?'_red':'_green'">CO</div>
                        <div class="top-line-value">{{oData.co}}</div>
                    </div>
                </div>
            </div>
            <div class="right-middle">
                <div class="right-middle-line">
                    <div class="middle-line-item">
                        <div class="middle-line-icon _wd"></div>
                        <div class="middle-line-title">温度：</div>
                        <div class="middle-line-value">{{oData.temperatue}}</div>
                    </div>
                    <div class="middle-line-item">
                        <div class="middle-line-icon _sd"></div>
                        <div class="middle-line-title">湿度：</div>
                        <div class="middle-line-value">{{oData.hd}}</div>
                    </div>
                    <div class="middle-line-item"></div>
                </div>
                <div class="right-middle-line">
                    <div class="middle-line-item">
                        <div class="middle-line-icon _fx"></div>
                        <div class="middle-line-title">风向：</div>
                        <div class="middle-line-value">{{oData.wdir}}</div>
                    </div>
                    <div class="middle-line-item">
                        <div class="middle-line-icon _fx"></div>
                        <div class="middle-line-title">风速：</div>
                        <div class="middle-line-value">{{oData.ws}}</div>
                    </div>
                    <div class="middle-line-item">
                        <div class="middle-line-icon _fj"></div>
                        <div class="middle-line-title">风级：</div>
                        <div class="middle-line-value">{{oData.windLevel}}</div>
                    </div>
                </div>
            </div>
            <div class="right-bottom">
                <div class="right-bottom-title">最近二十四小时变化趋势</div>
                <div class="right-bottom-chart">
                    <div ref="chart"
                         class="chart-item"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    const fChartOption = (data, oConf) => {
        let i,
            aDateArr = [], //时间数组
            aYzData = []//空气因子数组
        for (i = 0; i < data.length; i++) {
            aDateArr.push(data[i].monitortime);
            aYzData.push(data[i].aqi || data[i][oConf.yz]);
        }
        return {
            tooltip: {
                show: true,
                formatter:
                    function (params) {
                        return `${params.data}`
                    }
            },
            grid: {
                show: true,
                left: "8%",
                top: "5%",
                right: "5%",
                bottom: "20%",
                backgroundColor: '#E8EBF0',
                height: '80%',
            },
            xAxis: {
                type: 'category',
                axisLine: { // x轴线的颜色以及宽度
                    show: true,
                    lineStyle: {
                        color: "rgba(117, 117, 117, 0.38)",
                        type: "solid"
                    }
                },
                axisLabel: { //x轴文字的配置
                    show: true,
                    textStyle: {
                        color: "#6B6B6B",
                        fontSize: "9"
                    }
                },
                data: aDateArr
            },
            yAxis: {
                type: 'value',
                axisTick: { //坐标轴刻度线
                    show: false
                },
                axisLine: { //坐标轴
                    show: false
                },
                axisLabel: {//x轴文字的配置
                    show: true,
                    textStyle: {
                        color: "#858585",
                        fontSize: "9"
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [
                {
                    type: 'bar',
                    data: aYzData,
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var sColor = params.value;
                                if (sColor > 300) {
                                    return 'rgb(143, 105, 94)'
                                }
                                else if (sColor >= 201) {
                                    return 'purple'
                                }
                                else if (sColor >= 151) {
                                    return 'red'
                                }
                                else if (sColor >= 101) {
                                    return 'orange'
                                }
                                else if (sColor >= 51) {
                                    return 'yellow'
                                }
                                else if (sColor >= 0) {
                                    return 'green'
                                }
                            }
                        }
                    }
                }
            ]
        }
    }
    import { URLS_SY } from '@/urls.js';
    export default {
        data() {
            this.oChartApi = null;
            return {
                oData: {},
                aData: {},
                sPrimarypollutant: '', //首要空气污染
            }
        },
        mounted() {
            this.fGetKqzl(); //空气质量数据
            this.oChartApi = this.$WIV.fInitEcharts(this.$refs.chart, {
                optionFactory: fChartOption //生成绘图option的自定义方法
            });
        },
        beforeDestroy() {
            //组件销毁时，需手动调用 echart 图表的销毁方法，避免内存泄漏
            this.oChartApi.fDestroy();
        },
        methods: {
            fGetKqzl() {//空气质量数据
                this.$WIV.fRequest({
                    url: URLS_SY.d_getKqzl
                }).then(({ data: oData }) => {
                    this.oData = oData;
                    //console.log(this.oData);
                    const { aqi, co, no2, o3, pm10, pm25, so2 } = this.oData;
                    this.aData = [Number(aqi), Number(co), Number(no2), Number(o3), Number(pm10), Number(pm25), Number(so2)];
                    function max(prev, next) {
                        return Math.max(prev, next);
                    }
                    function findKey(oData, value) {
                        return Object.keys(oData).find((k) => {
                            return oData[k] == value;
                        })
                    }
                    this.sPrimarypollutant = findKey(oData, this.aData.reduce(max));
                    this.$nextTick(() => {
                        this.oChartApi.fSetData(
                            this.oData.aqis
                        );
                    })
                })
            },
            fAfterFlip(aData, oPageApi) { //分页组件回调
                this.aTable = aData;
            },
            fGetEchartsData(sVal, sType) { //图表数据
                this.$nextTick(() => {
                    this.oChartApi.fSetData(
                        this.oData[sVal], { yz: sType }
                    );
                })
            }
        }
    }
</script>

<style lang="less" rel="stylesheet" scoped>
    .home-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        right: 10px;
        width: 419px;
        height: 372px;
        background-color: #ffffff;
        border-radius: 8px;
        z-index: 2;
    }
    .right-top {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 149px;
        line-height: 149px;
        padding: 14px 0;
    }
    .right-top-line {
        display: flex;
        justify-content: space-between;
        width: 389px;
    }
    .top-line-item {
        border-radius: 8px;
        cursor: pointer;
        &._big {
            width: 162px;
        }
        &._middle {
            width: 109px;
        }
        &._small {
            width: 55px;
        }
    }
    .top-line-title {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 28px;
        line-height: 28px;
        font-size: 11px;
        border-radius: 8px 8px 0 0;
        &._address {
            width: 162px;
            color: #ffffff;
            background-color: #244879;
            font-size: 16px;
        }
        &._middle {
            width: 109px;
        }
        &._green {
            color: #ffffff;
            background: linear-gradient(to bottom, #84efdd, #0c9893);
        }
        &._red {
            color: #ffffff;
            background: linear-gradient(to bottom, #ef8484, #cf1f31);
        }
    }
    .top-line-value {
        display: flex;
        //flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 28px;
        line-height: 28px;
        font-size: 11px;
        border-radius: 0 0 8px 8px;
        border: 1px solid #dedede;
    }
    .right-middle {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        width: 400px;
        height: 77px;
        margin: 0 auto;
        background: #e8ebf0;
        border-radius: 8px;
    }
    .right-middle-line {
        display: flex;
        justify-content: space-around;
        width: 100%;
        padding-left: 16px;
    }
    .middle-line-item {
        display: flex;
        align-items: center;
        font-size: 11px;
        width: 33%;
    }
    .middle-line-icon {
        width: 20px;
        height: 20px;
        margin-right: 8px;
        &._wd {
            background-image: url("~@/assets/images/views/hbjc/home/icon-wd.png");
        }
        &._sd {
            background-image: url("~@/assets/images/views/hbjc/home/icon-sd.png");
        }
        &._fx {
            background-image: url("~@/assets/images/views/hbjc/home/icon-fx.png");
        }
        &._fs {
            background-image: url("~@/assets/images/views/hbjc/home/icon-fs.png");
        }
        &._fj {
            background-image: url("~@/assets/images/views/hbjc/home/icon-fj.png");
        }
    }
    .middle-line-title {
        margin-right: 8px;
        color: #999999;
    }
    .middle-line-value {
        color: #244879;
    }
    .right-bottom {
        width: 382px;
    }
    .right-bottom-title {
        margin-top: 8px;
    }
    .right-bottom-chart {
        width: 100%;
        height: 110px;
        padding-top: 5px;
    }
    .chart-item {
        width: 100%;
        height: 100%;
    }
</style>